<template>
    <div class="container" @click="isCloseType ? '' : close()">
        <div class="container-c" :style="{ width: width }" @click.stop="">
            <div class="title">{{ dataTitle }}</div>
            <div class="close point" @click="close()">×</div>
            <div class="info-box">
                <div class="align-items info-i">
                    <div class="name">
                        <span class="color-red font-small">* </span>
                        <span class="color-black font-small">企业名</span>
                    </div>
                    <div class="input-box">
                        <el-input :disabled="echo" v-model="enterpriseName" @input="onEnterpriseName"
                            placeholder="请输入员工实际上班企业" />
                        <div class="tips" v-if="enterpriseList.length > 0">
                            <div class="tip-i point" v-for="(item, index) in enterpriseList" :key="index"
                                @click="onSelect(item)">
                                {{ item.name }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="align-items info-i">
                    <div class="name">
                        <span class="color-red font-small">* </span>
                        <span class="color-black font-small">负责人</span>
                    </div>
                    <div class="input-box" @click="onSelectHead">
                        <div :class="[dataHeadList.length > 0 ? 'head-list-active' : '', 'head-list']">
                            <div class="name" v-if="dataHeadList.length == 0">请选择</div>
                            <template v-for="(item, index) in dataHeadList" :key="index">
                                <div v-if="index <= isHeadWhole" class="align-items" @click.stop="onDeleteHead(item.id)">
                                    <div class="head-i align-items color-grey font-base">
                                        <div>{{ item.userName }}</div>
                                        <img src="@/assets/close.png" class="close-img" alt="">
                                    </div>
                                </div>
                            </template>
                            <div class="head-i color-grey font-base" v-if="dataHeadList.length > isHeadWhole + 1"
                                @click.stop="onHeadWhole">
                                +{{ dataHeadList.length - 3 }}
                            </div>
                        </div>
                        <!-- <el-input v-model="headName" placeholder="请选择" /> -->
                    </div>
                </div>
                <div class="align-items info-i">
                    <div class="name">
                        <span class="color-red font-small">* </span>
                        <span class="color-black font-small">手机号</span>
                    </div>
                    <div class="input-box">
                        <el-input v-model="phone" placeholder="选择负责人后自动填入" :disabled="true" />
                    </div>
                </div>
                <div class="flex flex-jc-sb">
                    <div class="flex info-i-1">
                        <div class="">
                            <span class="color-red font-small"> </span>
                            <span class="color-black font-small">预支工资</span>
                        </div>
                        <div class="mg-l-10">
                            <el-switch v-model="isAdvance" />
                        </div>
                    </div>
                    <div class="flex info-i-1">
                        <div class="">
                            <span class="color-red font-small"> </span>
                            <span class="color-black font-small">领薪收集员工身份证</span>
                        </div>
                        <div class="mg-l-10">
                            <el-switch v-model="switchCard" />
                        </div>
                    </div>
                    <div class="flex info-i-1">
                        <div class="">
                            <span class="color-red font-small"> </span>
                            <span class="color-black font-small">负责人电话</span>
                        </div>
                        <div class="mg-l-10">
                            <el-switch v-model="isPhone" />
                        </div>
                    </div>
                </div>
                <div class="btn-box align-items justify-center mg-t-20">
                    <el-button class="mini-btn btn" @click="close()">取消</el-button>
                    <el-button class="mini-btn btn" type="primary" @click="onAddDetermine">确定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { shake } from '@/utils/util'
import { getEnterpriseList } from '@/api/home'
import { getDispatchList } from '@/api/long-insure'
export default defineComponent({
    props: ['dataTitle', 'list', 'width', 'isCloseType', 'headList', 'echo'],
    data() {
        return {
            switchCard: false,
            enterpriseName: '',
            enterpriseList: [],
            enterpriseObj: {} as any,
            headName: '',
            phone: '',
            dataHeadList: [] as any,
            isHeadWhole: 2,
            isAdvance: false,
            isPhone: false
        }
    },
    watch: { // 监听
        headList(curVal, oldVal) {
            this.dataHeadList = curVal
            this.phone = curVal[0].phone
            console.log(this.dataHeadList, 'dataHeadList')
            console.log(curVal, oldVal, '监听触发')
        }
    },
    created() {
        console.log(this.echo, 'echo')
        if (this.echo) {
            this.phone = this.echo.phone
            this.enterpriseName = this.echo.serveCompanyName
            this.switchCard = !!this.echo.isNeedIdcardPhoto
            this.dataHeadList = [{
                userName: this.echo.contacts,
                id: this.echo.createUserId
            }]
            this.enterpriseObj.id = this.echo.id
            this.isAdvance = !!this.echo.isOpenAdvance
            this.isPhone = !!this.echo.isShowContacts
        }
    },
    methods: {
        onEnterpriseName() {
            if (!this.enterpriseName) {
                this.enterpriseList = []
                return
            }
            shake((): any => {
                getEnterpriseList({
                    name: this.enterpriseName
                }).then(res => {
                    console.log(res, 'res')
                    this.enterpriseList = res
                })
            })
        },
        // 单个选择
        onSelect(event: any) {
            console.log(event, 'event')
            this.enterpriseList = []
            this.enterpriseObj = event
            this.enterpriseName = event.name
        },
        onSelectHead() {
            this.$emit('selectHead')
        },
        onDeleteHead(id: string) {
            this.dataHeadList = this.dataHeadList.filter((item: any) => item.id !== id)
            console.log(id, 'id')
        },
        onHeadWhole() {
            this.isHeadWhole = this.dataHeadList.length
            console.log('显示全部')
        },
        // 确定添加
        onAddDetermine() {
            if (!this.phone) {
                this.$message.error('请输入手机号')
                return
            }
            if (!this.enterpriseObj.id) {
                this.$message.error('请选择公司')
                return
            }
            if (this.dataHeadList.length === 0) {
                this.$message.error('请至少选择一个负责人')
                return
            }
            this.$emit('determine', this.dataHeadList, this.enterpriseObj, this.phone, this.switchCard, this.isAdvance, this.isPhone)
        },
        close() {
            this.$emit('close')
            this.$Bus.emit('close2', '关闭了吗')
        }
    }
})
</script>

<style scoped lang="stylus">
  .container
    width 100vw
    height 100vh
    background rgba(32, 37, 54, 0.6)
    position fixed
    top 0
    left 0
    flex-center()
    z-index 110

  .container-c
    width 642px
    max-height 90vh
    overflow auto
    background white
    box-shadow 0px 2px 12px 0px rgba(0, 0, 0, 0.06)
    border-radius 8px
    border 1px solid #E4E7ED
    position relative

  .container-c::-webkit-scrollbar
    width 10px
    height 1px

  .container-c::-webkit-scrollbar-thumb
    border-radius 10px
    box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
    background #ccc

  .container-c::-webkit-scrollbar-track
    box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
    border-radius 10px
    background #ededed

  .title
    margin 30px auto
    text-align center
    font-size font-normal
    font-weight bold
    color #303133

  .close
    position absolute
    right 20px
    top 16px
    font-size 28px
    color color-grey
    z-index 1000
.info-box
    padding 0 62px 2px 62px
    box-sizing border-box
    .info-i
        margin-bottom 20px
    .name
        width 88px
    .input-box
        width 100%
        position relative
    .tips
        overflow-y auto
        position absolute
        top 40px
        left 0
        width 100%
        max-height 300px
        background #fff
        border-radius 2px
        border 1px solid #e4e7ed
        z-index 9
    .tip-i
        font-size 14px
        height 34px
        line-height 34px
        padding 0 32px 0 20px
        color #606266
    .tip-i:hover
        background #f5f7fa
    .btn-box
        margin-bottom 40px
/deep/ .btn-box .el-button
    width 100px
.head-list
    width 100%
    min-height 40px
    border-radius 4px
    border 1px solid #e4e7ed
    display flex
    align-items center
    padding 8px 12px
    box-sizing border-box
    flex-wrap wrap
    .head-i
        margin-right 5px
        background #F4F5F6
        padding 6px 10px
        box-sizing border-box
        border-radius 4px
        margin-bottom 8px
    .name
        padding-left 3px
        height 100%
        color #9497B1
    .close-img
        width 14px
        height 14px
        margin-left 8px
.head-list-active
    padding 8px 12px 0 12px
  </style>
